<template>
    <div class="bg-theme p-0 font">
        <b-container class="p-0">
            <b-navbar fixed="true" class="pt-0" toggleable="lg" type="dark">
                <b-navbar-brand class="pt-0" ref="#">
                    <div class="nav-img-base">
                        <img alt="brand img" src="../img/brand.png" class="nav-img"/>

                    </div>
                </b-navbar-brand>
                <b-navbar-toggle target="nav-collapse" class="text-info"></b-navbar-toggle>

                <b-collapse is-nav id="nav-collapse" class="color-white">
                    <b-navbar-nav class="ml-auto text-center pr-3" align="center">
                        <b-nav-item to="/" active class="my-auto">首页</b-nav-item>
                        <b-nav-item to="/space" active class=my-auto v-if="isLogin">个人中心</b-nav-item>
                        <b-nav-item to="/login" active  v-if="!isLogin">
                            <b-btn variant="primary" class="border-light bg-theme px-3 mx-2">
                                登录
                            </b-btn>
                        </b-nav-item>

<!--                        <b-btn variant="primary" class="border-light bg-theme px-3 ml-2" v-if="isLogin"-->
<!--                               @click="isLogin = !isLogin" to="/login">登录-->
<!--                        </b-btn>-->
                        <b-nav-dropdown :text="username" v-else right>

                            <b-dropdown-item to="/publish" class=" text-center">发布列表</b-dropdown-item>
                            <b-dropdown-item to="/orders/buy" class=" text-center">订单列表</b-dropdown-item>
                            <b-dropdown-item to="/chat" class=" text-center">消息列表</b-dropdown-item>
                            <b-dropdown-item to="/favourites" class=" text-center">收藏夹</b-dropdown-item>
                            <b-dropdown-divider/>
                            <b-dropdown-item-btn class=" text-center" variant="danger" @click="$emit('logout')">退出
                            </b-dropdown-item-btn>
                        </b-nav-dropdown>
                    </b-navbar-nav>
                </b-collapse>
            </b-navbar>

        </b-container>
        <b-container fluid class="banner-base text-center" v-if="showAd">
            <b-row>
                <b-col cols="12" class="banner-base">
                    <b-img fluid center :src="src"></b-img>
                    <b-row class="justify-content-center">
                        <b-col cols="12" lg="auto">
                            <b-btn pill variant="primary" class="bg-sub-theme sign-btn" to="/register">立即注册 二手换成钱
                                <b-icon-arrow-bar-right/>
                            </b-btn>

                        </b-col>

                    </b-row>
                </b-col>
            </b-row>
        </b-container>
    </div>

</template>

<script>
  export default {
    name: "Nav",
    props: ['showAd','username','isLogin'],
    data() {
      return {
        src: require("../img/banner2.png")
      }
    }
  }
</script>

<style scoped>

    .nav-img {
        height: 50px;


    }

    .nav-img-base {
        background: white;
        padding: 10px 25px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .banner-base {
        background: linear-gradient(#ef7b3e, #FFFFFF);
    }

    .sign-btn {
        border: 0;
        color: #b71d38;
        background: #ffd202;
    }
</style>